<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }
    body{
      width: 1920px;
      height: 1080px;  
      box-sizing: border-box;
      border: 3px solid red;
      transform-origin: 0 0;
    }

    ul{
      width: 100%;
      height: 100%;
      list-style: none;

      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    li{
      width: 33.333%;
      height: 50%;
      box-sizing: border-box;
      border: 2px solid green;
      font-size: 30px;
    }
  </style>
</head>
<body>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

  <script>
    let target = 1920
    let targetY = 1080
    let cuWidth = window.document.documentElement.clientWidth || document.body.clientWidth
    let cuHeight = window.document.documentElement.clientHeight || document.body.clientHeight
    console.log('cuWidth: ', cuWidth);
    let scaleRatioX = cuWidth / target
    let scaleRatioY = cuHeight / targetY
    let scaleRatio = 1
    if(scaleRatioX === scaleRatioY){
      scaleRatio = scaleRatioX
    }else{
      scaleRatio = scaleRatioX < scaleRatioY ? scaleRatioX : scaleRatioY
    }
    console.log('scaleRatio: ', scaleRatio);
    document.body.style= `transform: scale(${scaleRatio}) translateX(-50%); position: relative; left: 50%;`
  </script>

</body>
</html>